import React from 'react';
import { Space, Divider } from 'antd';
import {
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
  HeartTwoTone,
  CheckCircleTwoTone,
  StarOutlined,
  StarFilled,
  StarTwoTone,
} from '@ant-design/icons';
import '../style.css';

const IconTutorial = () => {
  return (
    <div className="tutorial-container">
      <h1>Icon 图标组件</h1>

      {/* 1. 基本图标类型 */}
      <section className="example-section">
        <h2>1. 基本图标类型</h2>
        <div className="section-description">
          Ant Design 的图标分为三种类型：线框风格（Outlined）、实底风格（Filled）、双色风格（TwoTone）
        </div>
        <Space size={16}>
          <HomeOutlined style={{ fontSize: 24 }} />
          <SettingFilled style={{ fontSize: 24 }} />
          <HeartTwoTone style={{ fontSize: 24 }} twoToneColor="#eb2f96" />
        </Space>
      </section>

      {/* 2. 图标主题 */}
      <section className="example-section">
        <h2>2. 图标主题</h2>
        <div className="section-description">
          同一个图标可以使用不同的主题风格
        </div>
        <Space size={16}>
          <StarOutlined style={{ fontSize: 24 }} />
          <StarFilled style={{ fontSize: 24 }} />
          <StarTwoTone style={{ fontSize: 24 }} twoToneColor="#52c41a" />
        </Space>
      </section>

      {/* 3. 动态效果 */}
      <section className="example-section">
        <h2>3. 动态效果</h2>
        <div className="section-description">
          部分图标可以添加动态旋转效果
        </div>
        <Space size={16}>
          <SyncOutlined spin style={{ fontSize: 24 }} />
          <LoadingOutlined style={{ fontSize: 24 }} />
        </Space>
      </section>

      {/* 4. 图标颜色 */}
      <section className="example-section">
        <h2>4. 图标颜色</h2>
        <div className="section-description">
          可以通过 style 属性设置图标颜色，双色图标可通过 twoToneColor 属性设置主题色
        </div>
        <Space size={16}>
          <SmileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
          <HeartTwoTone style={{ fontSize: 24 }} twoToneColor="#eb2f96" />
          <CheckCircleTwoTone style={{ fontSize: 24 }} twoToneColor="#52c41a" />
        </Space>
      </section>

      {/* 5. 图标大小 */}
      <section className="example-section">
        <h2>5. 图标大小</h2>
        <div className="section-description">
          通过 style 的 fontSize 属性设置图标大小
        </div>
        <Space size={16} align="center">
          <HomeOutlined style={{ fontSize: 16 }} />
          <HomeOutlined style={{ fontSize: 24 }} />
          <HomeOutlined style={{ fontSize: 32 }} />
          <HomeOutlined style={{ fontSize: 48 }} />
        </Space>
      </section>
    </div>
  );
};

export default IconTutorial; 